<script setup lang="ts">
import ConfigProvider from '@/components/configProvider/index.vue';
import Footer from '@/components/footer/index.vue';
import Header from '@/components/header/index.vue';
</script>

<template>
  <view class="layout">
    <ConfigProvider>
      <view class="h-full w-full flex flex-col">
        <Header />
        <view class="h-0 flex-1 overflow-auto">
          <slot />
        </view>
        <Footer />
      </view>
    </ConfigProvider>
  </view>
</template>

<style lang="scss">
.layout {
  --footer-height: 103px;
  --header-height: 138px;
  --content-height: calc(100vh - var(--header-height) - var(--footer-height));
  --wot-button-primary-bg-color: var(--primary);
  --wot-input-color: var(--text-color);
  color: var(--text-color);

  image {
    will-change: transform;
  }
}
</style>
